import React, { useEffect } from 'react'
import NavBar from '../../../components/NavBar/index'
import { List, Modal, Toast } from 'antd-mobile'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { getProfileAsync } from '../../../store/reducer/profile'
import classNames from 'classnames'
import { Logout } from '../../../store/reducer'
import { useNavigate } from 'react-router-dom'

export default function ProfileEdit() {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const userProfile = useSelector((state) => state.profile.userProfile)
  useEffect(() => {
    dispatch(getProfileAsync())
  }, [dispatch])
  const logout = () => {
    // 1.显示弹窗
    //2.删除token
    Modal.confirm({
      title: '温馨提示',
      content: '你确定要退出吗',
      onConfirm: () => {
        dispatch(Logout())
        navigate('/login', { replace: true })
        Toast.show({
          icon: 'success',
          content: '退出成功',
        })
      },
    })
  }
  return (
    <div className={styles.root}>
      <div className='content'>
        <NavBar>个人信息</NavBar>
        <div className='wrapper'>
          <List className='profile-list'>
            <List.Item
              extra={
                <span className='avatar-wrapper'>
                  <img src={userProfile.photo} alt='' />
                </span>
              }
              onClick={() => {}}
            >
              头像
            </List.Item>
            <List.Item extra={userProfile.name} onClick={() => {}}>
              昵称
            </List.Item>
            <List.Item
              extra={
                <span
                  className={classNames(
                    'intro',
                    userProfile.intro ? 'normal' : ''
                  )}
                >
                  {userProfile.intro || '未填写'}
                </span>
              }
              onClick={() => {}}
            >
              简介
            </List.Item>
          </List>
          <List className='profile-list'>
            <List.Item
              extra={userProfile.gender === 0 ? '男' : '女'}
              onClick={() => {}}
            >
              性别
            </List.Item>
            <List.Item extra={userProfile.birthday} onClick={() => {}}>
              生日
            </List.Item>
          </List>
        </div>
        <div className='logout' onClick={logout}>
          <button className='btn'>退出登录</button>
        </div>
      </div>
    </div>
  )
}
